<template>
  <div class="page-login-record">
    <filter-view @update-list="() => getLoginRecordList()" />
    <a-table
      :columns="columns"
      :data-source="state.loginRecordList"
      :loading="state.loading"
      :pagination="false"
      :scroll="{ x: 1500 }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'user_name'">
          <span>
            {{ record.user_name || '-' }}
          </span>
        </template>
        <template v-if="column.key === 'login_time'">
          <span>
            {{ formatToDateTime(record.login_time * 1000) }}
          </span> </template
        ><template v-if="column.key === 'ip_addr'">
          <span>
            {{ record.ip_addr || '-' }}
          </span>
        </template>
      </template>
    </a-table>
    <a-pagination
      @change="handlePaginationChange"
      show-size-changer
      :defaultPageSize="10"
      :pageSizeOptions="['10', '20', '50', '100']"
      :show-total="(total:number)=>`共${total}条`"
      :total="queryState.total"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import FilterView from './components/FilterView.vue'
import { column } from './dataSource'
import { recordState } from './state'
import type { LoginRecordData } from '@/types/permission/loginRecord'
import { formatToDateTime } from '@/utils/format'
import apis from '@/apis'
import { storage } from '@/utils/storage'
const {
  loginRecord: { list }
} = apis
const columns = ref(column)
const state = reactive<{ loading: boolean; loginRecordList: LoginRecordData[] }>({
  loading: false,
  loginRecordList: []
})
const queryState = reactive({
  offset: 0, // 默认当前页数
  limit: 10, // 默认当前页显示数据的大小
  total: 0 // 总数，必须先有
})
/**
 * 分页改变事件
 */
const handlePaginationChange = (size: number, limit: number) => {
  queryState.limit = limit
  queryState.offset = (size - 1) * limit
  getLoginRecordList()
}
//获取登录记录列表接口
const getLoginRecordList = () => {
  state.loading = true
  // 更新列表接口
  const params = Object.assign(recordState, queryState)
  // params.admin_id = storage.get('user').user.admin_id
  list(params)
    .then((res: any) => {
      console.log('res: ', res)
      state.loginRecordList = res?.list ?? []
      queryState.total = res?.total ?? 0
      state.loading = false
      //处理下一页，第一条删除问题
      if (queryState.offset >= (res?.list ?? 0) && queryState.total != 0) {
        queryState.offset -= queryState.limit
        getLoginRecordList()
      }
    })
    .catch(() => {
      state.loading = false
    })
}

onMounted(() => {
  getLoginRecordList()
})
</script>
<style lang="less" scoped>
@basicColor: #0083ff;
.m-l-90 {
  margin-left: 90px;
}
.disabledText {
  color: #bfbfbf !important;
}
:deep(.ant-upload-list) {
  display: none;
}
.normal-text {
  font-size: 14px;
  color: #262626;
  font-weight: 500;
}
.modal-text {
  font-size: 16px;
  color: #595959;
}

:deep(.ant-form-item-label) {
  width: 72px;
  text-align: right;
}

:deep(.ant-form-item-label > label::after) {
  content: '';
}
.add-account {
  .height-80 {
    height: 80px;
  }
}
.page-login-record {
  padding-top: 6px;
  box-sizing: border-box;

  :deep(.ant-table-thead > tr > th) {
    color: #262626;
    font-weight: 500;
  }

  :deep(.ant-table-thead
      > tr
      > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before) {
    width: 0;
  }

  :deep(.ant-table-cell .ant-table-cell-with-append) {
    display: flex;
    align-items: center;
  }

  :deep(.ellipsis-text) {
    max-width: 154px !important;
    white-space: nowrap;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
  }

  .basicColor {
    color: @basicColor;
  }
}
</style>
